<template>
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" size="small">
    <el-form-item label="角色名称" prop="roleName">
      <el-input v-model.trim="ruleForm.roleName" placeholder="请输入角色名称"></el-input>
    </el-form-item>

    <el-form-item label="角色类型" prop="roleType">
      <el-select v-model="ruleForm.roleType" placeholder="请选择角色类型" class="block">
        <el-option v-for="(i, k) in $attrs.types" :label="i.label" :value="i.value" :key="k"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="角色权限" prop="functionIdList">
      <el-input v-model="ruleForm.fids" class="hide" />
      <el-tree
        show-checkbox
        node-key="functionId"
        :data="authorities"
        :props="{
          children: 'children',
          label: 'functionName'
        }"
        :default-checked-keys="ruleForm.functionIdList"
        @check="handleCheckChange"
      ></el-tree>
    </el-form-item>

    <el-form-item label="角色描述">
      <el-input v-model.trim="ruleForm.roleSummary" type="textarea" placeholder="请输入角色描述" :rows="4"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
/* Mixins
------------------------------- */
import { Form } from '@/mixins'

/* Api
------------------------------- */

/* Model
------------------------------- */
import { roleModel } from '../model'
export default {
  mixins: [Form('ruleForm', roleModel)],
  props: {
    authorities: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      ruleForm: Object.assign(
        {
          fids: ''
        },
        roleModel
      ),
      rules: {
        roleName: [
          { required: true, message: this.$t('required', { field: '角色名' }) }
        ],
        roleType: [
          {
            required: true,
            message: this.$t('required', { field: '角色类型' }),
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    handleCheckChange (
      nodes,
      { checkedKeys, checkedNodes, halfCheckedNodes, halfCheckedKeys }
    ) {
      this.ruleForm.functionIdList = checkedKeys
    }
    // --------------------------------------  request --------------------------------------
    // -------------------------------------- !request --------------------------------------
  },
  mounted () {
    this.watchSelect('roleType', 'roleTypeValue', this.$attrs.types)
  }
}
</script>
